<template>
	<view class='productSort'>
		<view class="sticky-box" :style="'top:'+(marTop)+'px;'">
			<scroll-view class="scroll-view_H" style="width: 100%;" scroll-x="true" scroll-with-animation
				:scroll-left="tabsScrollLeft" @scroll="scroll">
				<view class="tab nav-bd" id="tab_list">
					<view id="tab_item" :class="{ 'active': listActive == index}" class="item"
						v-for="(item, index) in explosiveMoney" :key="index" @click="ProductNavTab(item,index)">
						<!-- 	<view class='pictrue'>
						<image :src='item.pic'></image>
					</view> -->
						<view class="txt">{{item.name}}</view>
						<view class="label">-</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="swiper" style="width: 50%;" v-if="imgUrls.length">
			<swiper indicator-dots="true" :autoplay="true" :circular="circular" :interval="interval"
				:duration="duration" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
				<block v-for="(item,index) in imgUrls" :key="index">
					<swiper-item>
						<navigator :url='item.url' class='slide-navigator acea-row row-between-wrapper'
							hover-class='none'>
							<image :src="item.pic" class="slide-image" lazy-load></image>
						</navigator>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<scroll-view scroll-y="true" :scroll-into-view="toView" :style='"height:"+height+"rpx;margin-top: 96rpx;"'
			@scroll="scroll" scroll-with-animation='true'>
			<block v-for="(item,index) in productList" :key="index">

				<view class='listw' :id="'b'+index">
					<view class='title acea-row row-center-wrapper'>
						<view class='line'></view>
						<view class='name'>{{item.name}}</view>
						<view class='line'></view>
					</view>
					<view class='list acea-row'>
						<block v-for="(itemn,indexn) in item.child" :key="indexn">
							<navigator hover-class='none'
								:url='"/pages/goods_list/index?cid="+itemn.id+"&title="+itemn.name'
								class='item acea-row row-column row-middle'>
								<view class='picture' :style="{'background-color':itemn.extra?'none':'#f7f7f7'}">
									<image :src='itemn.extra'></image>
								</view>
								<view class='name line1'>{{itemn.name}}</view>
							</navigator>
						</block>
					</view>
				</view>
			</block>
			<view :style='"height:"+(height-300)+"rpx;"' v-if="number<15"></view>
		</scroll-view>
	</view>
	</view>

</template>

<script>
	import {
		getCategoryList
	} from '@/api/store.js';
	import {
		getIndexData,
		getCoupons,
		setCouponReceive
	} from '@/api/api.js';
	import ClipboardJS from "@/plugin/clipboard/clipboard.js";
	export default {
		data() {
			return {
				imgUrls: [],
			}
		},
		onLoad(options) {
			this.getIndexConfig();
		},
		onShow() {},
		methods: {
			// 首页数据
			getIndexConfig: function() {
				let that = this;
				getIndexData().then(res => {
					uni.setNavigationBarTitle({
						title: '首页'
					})
					that.$set(that, "logoUrl", res.data.logoUrl);
					that.$set(that, "site_name", '首页');
					that.$set(that, "imgUrls", res.data.banner);
					that.$set(that, "menus", res.data.menus);
					that.$set(that, "roll", res.data.roll ? res.data.roll : []);
					// #ifdef H5
					that.$store.commit("SET_CHATURL", res.data.yzfUrl);
					Cache.set('chatUrl', res.data.yzfUrl);
					// #endif
					that.$set(that, "explosiveMoney", res.data.explosiveMoney);
					that.goodType = res.data.explosiveMoney[0].type
					this.getGroomList();
					this.shareApi();
					this.getcouponList();
					// #ifdef H5
					// that.subscribe = res.data.subscribe;
					// #endif

				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.sticky-box {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		position: -webkit-sticky;
		/* #endif */
		position: sticky;
		/* #ifdef H5*/
		top: var(--window-top);
		/* #endif */
		height: 150rpx;
		z-index: 99;
		flex-direction: row;
		margin: 0px;
		background: #f5f5f5;
		padding: 30rpx 0;
	}
</style>